<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest"></script>

</head>

<body style="padding: 12px;">
    <div class="pd12">
        <div class="top flex_x start ">
            <a href="./home.html"><img src="./static/image/left.png" alt=""></a>
            <span>search</span>
        </div>
    </div>
    <div class="t mt_20">Where to next?</div>
    <div class="title mt_20"> Book your flight</div>
    <div class="b_list flex_x between mt_20">
        <div class="btns txt_center active">Round-trip</div>
        <div class="btns txt_center">One-Way</div>
        <div class="btns txt_center">Multi-city</div>
    </div>
    <div class="pos_r mt_20">
        <div class="from flex_x between">
            <div>
                <div class="from_txt">from</div>
                <div class="fron_title">BeiJing , China</div>
            </div>
            <img src="./static/image/flight.png" alt="">
        </div>
        <div class="from flex_x between mt_20">
            <div>
                <div class="from_txt">from</div>
                <div class="fron_title">Kuala Lumpur,Malaysia</div>
            </div>
            <img class="to" src="./static/image/flight.png" alt="">
        </div>
        <img src="./static/image/Group 29.png" class="pos_a change" alt="">
    </div>
    <a href="./selectDate.html">
        <div class="from flex_x start mt_20">

            <img src="./static/image/b.png" style="transform: none;" alt="">
            <div class="flex_x around dates" style="flex: 1;">
                <span class="begin"></span>
                <img src="./static/image/🦆 icon _exchange_.png" alt="">
                <span class="end"></span>
            </div>
        </div>
    </a>
    <div class="flex_x between mt_20 e_btn">
        <div class="e flex_x around">
            <img src="./static/image/33.png" alt="">
            <span>Economy</span>
            <img class="down" src="./static/image/down.svg" alt="">
        </div>
        <div class="e flex_x around">
            <img src="./static/image/44.png" alt="">
            <span>Any stops</span>
            <img class="down" src="./static/image/down.svg" alt="">
        </div>
    </div>
    <div class="flex_x between mt_20">
        <div class="e1 flex_x around">
            <span>1 Traveler</span>
            <img src="./static/image/down.svg" alt="">
        </div>
        <div class="e1 flex_x around">
            <span>0 Children</span>
            <img src="./static/image/down.svg" alt="">
        </div>
        <div class="e1 flex_x around">
            <span>0 Infant</span>
            <img src="./static/image/down.svg" alt="">
        </div>
    </div>
    <div class="b_sear txt_center"><a href="./filigt.html">Search Flights</a></div>
</body>
<script>
    $(function () {
        var url = window.location.href;
        var params = new URLSearchParams(url.split('?')[1])
        console.log(params)
        if (!!params.size) {
            var param1 = params.get('b');
            var param2 = params.get('e')
            $('.dates').show()
            $('.begin').html('June'+ param1+'th')
            $('.end').html('June'+ param2+'th')
        }else{
            $('.dates').hide()
        }
    })
    gsap.from(".top  img", {
        duration: .5,
        y: 100,
        x:100
    });
     
    gsap.from(".active", {
        duration: .5,
        y: -20,
        x:100
    });
  
</script>
<style>
    .b_sear {
        width: 350px;
        height: 51px;
        border-radius: 13px;
        background: #FDA84A;
        font-size: 18px;
        font-weight: 500;
        line-height: 51px;
        margin: 0 auto;
        margin-top: 140px;
    }

    .e1 {
        width: 110px;
        height: 36px;
        border-radius: 6px;
        background: #FFF;
        align-items: center;
        font-size: 14px;
    }

    .e img {
        width: 25px;
        height: 21px;
    }

    .e img.down,
    .e1 img {
        width: 14px;
        height: var(--spacing-2, 8px);
    }

    .e {
        width: 169px;
        height: 71px;
        border-radius: 10px;
        background: #FFF;
        align-items: center;
    }

    .change {
        width: 32px;
        height: 31.319px;
        top: 52px;
        right: 14px;
    }

    .fron_title {
        font-size: 18px;
    }

    .from_txt {
        color: #000;
        font-size: 10px;
    }

    .from img {
        width: 29px;
        height: 13px;
        transform: rotate(-9.515deg);
    }

    .from img.to {
        transform: rotate(53.713deg);
    }

    .from {
        width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
        height: 60px;
        border-radius: var(--spacing-2, 8px);
        background: #FFF;
        align-items: center;
    }

    .active {
        background: #FF8906;
        border: none !important;
    }

    .btns {
        width: 103px;
        height: 33px;
        line-height: 33px;
        font-size: 15px;
        border: 1px solid #000;
        border-radius: 6px;
    }

    .t {
        font-size: 15px;
    }

    .title {
        font-size: 24px;
    }

    .top img {
        width: 8px;
        height: 11px;
        margin-right: 115px;
    }

    .top {
        font-size: 15px;
        align-items: center;
    }
</style>

</html>